<template>
  <div class="Box">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      tab-position="left"
      stretch
    >
      <el-tab-pane label="系统设置" name="first"
        ><el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="系统地址">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="后台地址"
            ><el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="系统标题"
            ><el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="Logo">
            <el-input v-model="form.name"></el-input
          ></el-form-item>
          <el-form-item label="Favicon">
            <el-input v-model="form.name"></el-input
          ></el-form-item>
          <el-form-item label="页脚信息">
            <el-input type="textarea" :rows="6" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="国际化设置" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="SEO设置" name="third"
        ><el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="关键词">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="描述信息">
            <el-input type="textarea" :rows="6" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form></el-tab-pane
      >
      <el-tab-pane label="数据统计" name="fourth"
        ><el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="百度统计">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="谷歌分析"
            ><el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form></el-tab-pane
      >
      <el-tab-pane label="OSS设置" name="fourth2">定时任务补偿</el-tab-pane>
      <el-tab-pane label="SMTP服务" name="fourth3"
        ><el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="SMTP地址">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label-width="220px" label="SMTP端口（强制使用SSL链接）"
            ><el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="SMTP用户"
            ><el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label=" SMTP密码">
            <el-input v-model="form.name"></el-input
          ></el-form-item>
          <el-form-item label="发件人">
            <el-input v-model="form.name"></el-input
          ></el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  // 定义属性
  data() {
    //这里存放数据
    return {
      activeName: "second",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
.Box {
  background: #fff;
  padding: 20px;
}
</style>
